<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400" rel="stylesheet">
    <link rel='stylesheet' type="text/css" href='<%= rootPath %>/css/lib/vis.min.css' />
    <link rel="stylesheet" type="text/css" href="<%= rootPath %>/css/lib/component.css">
    <link rel='stylesheet' type="text/css" href='<%= rootPath %>/css/style.css' />
    <link rel='stylesheet' type="text/css" href='<%= rootPath %>/css/model.css' />
    <link rel='stylesheet' type="text/css" href='<%= rootPath %>/css/pipeline.css' />

    <!-- JQuery -->
    <script src="<%= rootPath %>/js/lib/jquery-1.12.4.min.js"></script>
    <script src="<%= rootPath %>/js/lib/jquery-ui.min.js"></script>

    <!-- d3 and vega -->
    <script src="<%= rootPath %>/js/lib/d3.min.js"></script>
    <script src="<%= rootPath %>/js/lib/vega.js"></script>
    <script src="<%= rootPath %>/js/lib/vega-lite.js"></script>
    <script src="<%= rootPath %>/js/lib/vega-embed.js" charset="utf-8"></script>

    <!-- Load vis.js -->
    <script src="<%= rootPath %>/js/lib/vis.min.js"></script>

    <!-- lib js files -->
    <script src="<%= rootPath %>/js/lib/ejs_production.js"></script>

    <script src="<%= rootPath %>/js/annotations.js"></script>
    <script src="<%= rootPath %>/js/tooltip.js"></script>
    <script src="<%= rootPath %>/js/pipeline.js"></script>
    <script src="<%= rootPath %>/js/model.js"></script>
  </head>
  <body data-id=<%= modelId %> data-root="<%= rootPath %>">
    <%- include partials/nav.ejs %>
    <div class="container">
      <div class="model-headings">
        <div class="model-heading model-ids">
          IDs
        </div>
        <div class="model-heading model-dataframe">
          DataFrame
        </div>
        <div class="model-heading model-spec">
          Specifications
        </div>
        <div class="model-heading model-metrics">
          Metrics
        </div>
        <div class="model-heading model-misc">
          Misc.
        </div>
      </div>

      <div class="models-container">
        <div class="models">
        </div>
      </div>

      <div id="network">
      </div>

    </div>

    <div class="md-modal md-effect-1" id="modal-1">
      <div class="md-content">
        <div class="md-header">
          Model <div class="md-model-id"></div> Annotations
        </div>
        <div class="md-body">
          <div class="md-annotations">
          </div>
          <div class="md-input-container">
            <input class="md-input" placeholder="Add annotation..."></input>
            <img class="md-send" src='<%= rootPath %>/images/send.png'/>
          </div>
        </div>
      </div>
    </div>

    <div class="md-overlay"></div>
  </body>
</html>
